<template>
  <div class="base-panels">
    <anchorLink :links="links"></anchorLink>
    <section id="c1"><link1></link1></section>
    <section id="c2"><link2></link2></section>
    <section id="c3"><link3></link3></section>
    <section id="c4"><link4></link4></section>
    <section id="c5"><link5></link5></section>
    <section id="c6"><link6></link6></section>
    <section id="c7"><link7></link7></section>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref } from 'vue';
import { anchorLink } from "/@/components/linkComponent/index";
import { link1 , link2 , link3 , link4 ,link5 ,link6, link7 } from "./officialItems";

export default defineComponent({
  components: {
    anchorLink , link1 , link2 , link3 , link4 ,link5 ,link6, link7
  },
  setup() {
    return {
      links: ref([{
        key: '#c1',
        title: '工程招投标'
      },{
        key: '#c2',
        title: '合同备案'
      },{
        key: '#c3',
        title: '施工图审查信息'
      },{
        key: '#c4',
        title: '施工许可信息'
      },{
        key: '#c5',
        title: '质量监督信息'
      },{
        key: '#c6',
        title: '安全监督信息'
      },{
        key: '#c7',
        title: '工程竣工验收备案'
      }])
    }
  }
})
</script>

<style lang="less" scoped>

.base-panels{
  padding-bottom: 50px;
}

.types {
  display: flex;

  li {
    padding: 5px 10px;
    margin-right: 20px;
    font-size: 14px;
    line-height: 22px;
    color: #333;
    cursor: pointer;
    background: #F6F6F6;

    &.active {
      color: @white;
      background: #216DE5;
    }
  }
}
</style>
